<template>
  <div class="prohibited-product-trend">
    <div class="prohibited-product-trend-content">
      <div class="prohibited-product-trend-content-title">违禁品趋势</div>
      <div class="prohibited-product-trend-content-select">
        <div class="select">
          <nanning-screen-select :options="typeOptions" @on-change-value="onChangeSelect" placeholder="全部类型"></nanning-screen-select>
        </div>
        <div class="select-date">
          <nanning-screen-select :options="dateOptions" @on-change-value="onChangeSelect" placeholder="近七天"></nanning-screen-select>
        </div>
      </div>
      <div class="prohibited-product-trend-content-echarts">
        <screen-chart @initCb="initRankChart"></screen-chart>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { getTrendChartOption } from './option'
@Component({
  name: 'prohibited-product-trend'
})
export default class ProhibitedProductTrend extends Vue {
  private rankChart: any = null

  private dateOptions: Array<any> = [
    { value: '1', label: '近七天' },
    { value: '2', label: '近三十天' },
    { value: '3', label: '近一年' }
  ]

  private typeOptions: Array<any> = [
    { value: '0', label: '易燃' },
    { value: '1', label: '易爆' },
    { value: '2', label: '传染性' },
    { value: '3', label: '腐蚀性' },
    { value: '4', label: '有毒' },
    { value: '5', label: '其他' }
  ]

  private onChangeSelect(e: any) {
    console.log('onChangeSelect', e)
  }

  private xData: any = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

  private yData: any = [0, 0, 0, 0, 0, 0, 0]

  //  进度条
  private initRankChart(chart: any): void {
    chart.clear()
    this.rankChart = chart
    setTimeout(() => {
      this.rankChart.setOption(getTrendChartOption({ xData: this.xData, yData: this.yData }))
    }, 300)
  }
}
</script>

<style lang="scss" scoped>
.prohibited-product-trend {
  box-sizing: border-box;
  width: 100%;
  height: calc(40% - 50px);
  .prohibited-product-trend-content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    &-title {
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      font-family: 'PingFang Regular';
      font-weight: 500;
      color: #ffffff;
      position: relative;
      padding-left: 33px;
      text-align: left;
    }
    &-title::after {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #23fffc;
      position: absolute;
      left: 18px;
      top: 10px;
    }
    &-select {
      box-sizing: border-box;
      display: flex;
      width: 100%;
      height: 35px;
      padding: 0px 0 0 18px;
      margin-top: 15px;
      .select {
        width: 110px;
        margin-right: 10px;
      }
      .select-date {
        width: 110px;
        margin-right: 10px;
      }
    }
    &-echarts {
      width: 100%;
      height: calc(100% - 80px);
    }
  }
}
</style>
